<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item :label="$t('时间')">
              <a-date-picker
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('请选择开始时间')"
                class="query-group-cust"
                v-model="queryParam.bTime"
              ></a-date-picker>
              <span class="query-group-split-cust"></span>
              <a-date-picker
                :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('请选择结束时间')"
                class="query-group-cust"
                v-model="queryParam.eTime"
              ></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="9" :md="10" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{$t('查询')}}</a-button>
              <a-dropdown>
                <a-menu slot="overlay" @click="handleDateClick">
                  <a-menu-item key="1"> {{$t('今日')}} </a-menu-item>
                  <a-menu-item key="2"> {{$t('近三天')}} </a-menu-item>
                  <a-menu-item key="3"> {{$t('近七天')}} </a-menu-item>
                  <a-menu-item key="4"> {{$t('近一月')}} </a-menu-item>
                  <a-menu-item key="5"> {{$t('近三月')}} </a-menu-item>
                  <a-menu-item key="6"> {{$t('近半年')}} </a-menu-item>
                  <a-menu-item key="7"> {{$t('本年')}} </a-menu-item>
                </a-menu>
                <a-button type="primary" style="margin-left: 8px"> {{ $t('快捷查询') }} <a-icon type="down" /></a-button>
              </a-dropdown>
              <a-button type="primary" style="margin-left: 8px" @click="searchReset">{{
                $t('重置')
              }}</a-button>
              <a-button
                type="primary"
                style="margin-left: 8px"
                @click="handleExportXls($t('会员套餐汇总'))"
                v-has="'MemberPackageSummaryController:export'"
                >{{ $t('导出') }}</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- table区域-begin -->
    <div style="width: 1000px">
      <div style="margin-bottom: 10px; font-weight: 600; color: #000">{{ $t('现金售币') }}</div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="cashSaleColumns"
        :dataSource="cashSaleDataSource"
        :pagination="false"
        :loading="loading1"
        :customRow="(r, i)=>customRow1(r,i,'a')"
      >
        <span slot="goodsName" slot-scope="text, record">
          <a v-if="text != $t('合计')" @click.stop="handleDetail(record)">{{ text }}</a>
          <span v-else>{{ text }}</span>
        </span>
      </a-table>
      <div style="margin-top: 10px; margin-bottom: 10px; font-weight: 600; color: #000">{{ $t('会员充币') }}</div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{ x: true }"
        :columns="memberRechargeColumns"
        :dataSource="memberRechargeDataSource"
        :pagination="false"
        :loading="loading2"
        :customRow="(r, i)=>customRow1(r,i,'b')"
      >
        <span slot="goodsName" slot-scope="text, record">
          <a v-if="text != $t('合计')" @click.stop="handleDetail(record)">{{ text }}</a>
          <span v-else>{{ text }}</span>
        </span>
      </a-table>
      <div style="margin-top: 10px; margin-bottom: 10px; font-weight: 600; color: #000">{{ $t('门票销售') }}</div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{ x: true }"
        :columns="ticketColumns"
        :dataSource="ticketDataSource"
        :pagination="false"
        :loading="loading3"
        :customRow="(r, i)=>customRow1(r,i,'c')"
      >
        <span slot="goodsName" slot-scope="text, record">
          <a v-if="text != $t('合计')" @click.stop="handleDetail(record)">{{ text }}</a>
          <span v-else>{{ text }}</span>
        </span>
      </a-table>
      <div style="margin-top: 10px; margin-bottom: 10px; font-weight: 600; color: #000">{{ $t('套餐销售') }}</div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{ x: true }"
        :columns="setmealColumns"
        :dataSource="setmealDataSource"
        :pagination="false"
        :loading="loading4"
        :customRow="(r, i)=>customRow1(r,i,'d')"
      >
        <span slot="goodsName" slot-scope="text, record">
          <a v-if="text != $t('合计')" @click.stop="handleDetail(record)">{{ text }}</a>
          <span v-else>{{ text }}</span>
        </span>
      </a-table>
    </div>
    <package-summary-modal ref="modalForm"></package-summary-modal>
  </a-card>
</template>

<script>
import moment from 'moment'
import '@/assets/less/TableExpand.less'
import { getAction, downFile } from '@/api/manage'
import PackageSummaryModal from './modules/PackageSummaryModal'
export default {
  name: 'MemberPackageSummary',
  mixins: [],
  components: { PackageSummaryModal },
  data() {
    return {
      moment,
      description: '会员套餐汇总页面',
      queryParam: {
        bTime: moment().format('YYYY-MM-DD 00:00:00'),
        eTime: moment().format('YYYY-MM-DD 23:59:59'),
        groupBy: 'goods_id',
      },
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      cashSaleColumns: [
        {
          title: this.$t('商品名称'),
          align: 'center',
          dataIndex: 'goodsName',
          scopedSlots: { customRender: 'goodsName' },
          customCell: (r) => {
            if (r.goodsName == this.$t('合计')) {
              return {
                attrs: {
                  colSpan: 2,
                },
              }
            }
            return {
              attrs: {
                colSpan: 1,
              },
            }
          },
        },
        {
          title: this.$t('套餐单价'),
          align: 'center',
          dataIndex: 'avgPrice',
          customRender: (text, row, index) => {
            if (row.goodsName != this.$t('合计')) {
              return text.toFixed(2)
            }
            return {
              attrs: {
                colSpan: 0,
              },
            }
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: (t) => {
            return t.toFixed(2)
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('售币值'),
          align: 'center',
          dataIndex: 'coin',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
      ],
      cashSaleDataSource: [],
      memberRechargeColumns: [
        {
          title: this.$t('商品名称'),
          align: 'center',
          dataIndex: 'goodsName',
          scopedSlots: { customRender: 'goodsName' },
          customCell: (r) => {
            if (r.goodsName == this.$t('合计')) {
              return {
                attrs: {
                  colSpan: 2,
                },
              }
            }
            return {
              attrs: {
                colSpan: 1,
              },
            }
          },
        },
        {
          title: this.$t('套餐单价'),
          align: 'center',
          dataIndex: 'avgPrice',
          customRender: (text, row, index) => {
            if (row.goodsName != this.$t('合计')) {
              return text.toFixed(2)
            }
            return {
              attrs: {
                colSpan: 0,
              },
            }
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: (t) => {
            return t.toFixed(2)
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('充币值'),
          align: 'center',
          dataIndex: 'coin',
          customRender: (text, r) => {
            return text.toFixed(2);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
      ],
      memberRechargeDataSource: [],
      ticketColumns: [
        {
          title: this.$t('商品名称'),
          align: 'center',
          dataIndex: 'goodsName',
          scopedSlots: { customRender: 'goodsName' },
          customCell: (r) => {
            if (r.goodsName == this.$t('合计')) {
              return {
                attrs: {
                  colSpan: 2,
                },
              }
            }
            return {
              attrs: {
                colSpan: 1,
              },
            }
          },
        },
        {
          title: this.$t('套餐单价'),
          align: 'center',
          dataIndex: 'avgPrice',
          customRender: (text, row, index) => {
            if (row.goodsName != this.$t('合计')) {
              return text.toFixed(2)
            }
            return {
              attrs: {
                colSpan: 0,
              },
            }
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: (t) => {
            return t.toFixed(2)
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
      ],
      ticketDataSource: [],
      setmealColumns: [
        {
          title: this.$t('商品名称'),
          align: 'center',
          dataIndex: 'goodsName',
          scopedSlots: { customRender: 'goodsName' },
          customCell: (r) => {
            if (r.goodsName == this.$t('合计')) {
              return {
                attrs: {
                  colSpan: 2,
                },
              }
            }
            return {
              attrs: {
                colSpan: 1,
              },
            }
          },
        },
        {
          title: this.$t('套餐单价'),
          align: 'center',
          dataIndex: 'avgPrice',
          customRender: (text, row, index) => {
            if (row.goodsName != this.$t('合计')) {
              return text.toFixed(2)
            }
            return {
              attrs: {
                colSpan: 0,
              },
            }
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: (t) => {
            return t.toFixed(2)
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('币值'),
          align: 'center',
          dataIndex: 'coin',
          customRender: (text, r) => {
            return text.toFixed(2);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('限时币'),
          align: 'center',
          dataIndex: 'limitCoin',
          customRender: (text, r) => {
            return text.toFixed(2);
          },
          customCell: (r, i) => {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
      ],
      setmealDataSource: [],
      url: {
        exportXlsUrl: '/report/day/memberPackageSummary/export',
      },
      selectedRowIndex: []
    }
  },
  created() {
    this.searchQuery()
  },
  methods: {
    searchQuery() {
      this.selectedRowIndex = []
      this.searchQuery1('cashSale')
      this.searchQuery1('memberRecharge')
      this.searchQuery1('ticket')
      this.searchQuery1('setmeal')
    },
    searchQuery1(arg) {
      let param = Object.assign({}, this.queryParam)
      if (arg == 'cashSale') {
        this.loading1 = true
        param.goodsForm = 8
      }
      if (arg == 'memberRecharge') {
        this.loading2 = true
        param.goodsForm = 2
      }
      if (arg == 'ticket') {
        this.loading3 = true
        param.goodsForm = '3,4'
      }
      if (arg == 'setmeal') {
        this.loading4 = true
        param.goodsForm = 5
      }
      getAction('/report/day/memberPackageSummary/list', param)
        .then((res) => {
          if (res.success) {
            let total = {},
              list = ['goodsName', 'avgPrice', 'coin', 'count', 'limitCoin', 'sale', 'saleNum']
            list.forEach((lt, i) => {
              if (i == 0) {
                total[lt] = this.$t('合计')
              } else {
                total[lt] = 0
              }
            })
            res.result.forEach((ds) => {
              for (var key in ds) {
                if (total[key] !== undefined && !isNaN(ds[key])) {
                  total[key] += ds[key]
                }
              }
            })
            if (arg == 'cashSale') {
              this.cashSaleDataSource = res.result
              this.cashSaleDataSource.push(total)
            }
            if (arg == 'memberRecharge') {
              this.memberRechargeDataSource = res.result
              this.memberRechargeDataSource.push(total)
            }
            if (arg == 'ticket') {
              this.ticketDataSource = res.result
              this.ticketDataSource.push(total)
            }
            if (arg == 'setmeal') {
              this.setmealDataSource = res.result
              this.setmealDataSource.push(total)
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          if (arg == 'cashSale') {
            this.loading1 = false
          }
          if (arg == 'memberRecharge') {
            this.loading2 = false
          }
          if (arg == 'ticket') {
            this.loading3 = false
          }
          if (arg == 'setmeal') {
            this.loading4 = false
          }
        })
    },
    searchReset() {
      let that = this
      that.queryParam = {
        bTime: moment().format('YYYY-MM-DD 00:00:00'),
        eTime: moment().format('YYYY-MM-DD 23:59:59'),
        groupBy: 'goods_id',
      }
      that.searchQuery()
    },
    customRow1(r, i, k) {
      return {
        on: {
          click: () => {
            let x = this.selectedRowIndex.findIndex(r=>{return r==k+''+i})
            if( x == -1 ){
              this.selectedRowIndex.push(k+''+i)
            }else{
              this.selectedRowIndex.splice(x, 1)
            }
          }
        },
        style: {
          whiteSpace: 'break-spaces',
          wordBreak: 'break-word',
          overflowWrap: 'break-word',
          backgroundColor: this.selectedRowIndex.findIndex(r=>{return r==k+''+i}) > -1 ? '#FFECE6' : '',
          fontWeight: r.goodsName == this.$t('合计') ? 700 : 400,
        },
      }
    },
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = this.$t('导出文件')
      }
      let param = this.queryParam
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning(this.$t('文件下载失败'))
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    handleDetail(record) {
      this.$refs.modalForm.show(Object.assign({}, record, this.queryParam))
    },
    handleDateClick(evt){
      if(evt.key=='1'){
        this.queryParam.bTime=moment().format('YYYY-MM-DD 00:00:00')
        this.queryParam.eTime=moment().format('YYYY-MM-DD 23:59:59')
      }
      if(evt.key=='2'){
        this.queryParam.bTime=moment().subtract(2,'day').format('YYYY-MM-DD 00:00:00')
        this.queryParam.eTime=moment().format('YYYY-MM-DD 23:59:59')
      }
      if(evt.key=='3'){
        this.queryParam.bTime=moment().subtract(6,'day').format('YYYY-MM-DD 00:00:00')
        this.queryParam.eTime=moment().format('YYYY-MM-DD 23:59:59')
      }
      if(evt.key=='4'){
        this.queryParam.bTime=moment().subtract(1, 'month').format('YYYY-MM-DD 00:00:00')
        this.queryParam.eTime=moment().format('YYYY-MM-DD 23:59:59')
      }
      if(evt.key=='5'){
        this.queryParam.bTime=moment().subtract(3,'month').format('YYYY-MM-DD 00:00:00')
        this.queryParam.eTime=moment().format('YYYY-MM-DD 23:59:59')
      }
      if(evt.key=='6'){
        this.queryParam.bTime=moment().subtract(6,'month').format('YYYY-MM-DD 00:00:00')
        this.queryParam.eTime=moment().format('YYYY-MM-DD 23:59:59')
      }
      if(evt.key=='7'){
        this.queryParam.bTime=moment().startOf('year').format('YYYY-MM-DD 00:00:00')
        this.queryParam.eTime=moment().format('YYYY-MM-DD 23:59:59')
      }
      this.searchQuery()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>